<template>
  <div class="fa">
      <p>组件之间的通信</p>
    <div >
      这是子组件传递来的信息  emit>>>>>{{fromSon}}
    </div>
    <p>
      向子组件传：<input type="text" v-model="toson" placeholder="向子组件传递的信息">
      </p>

      <div>
        <button @click="log">登入</button><button @click="seta">获取年龄</button>
        <p>
          登录者：{{$store.state.userName}}  ----的年龄：{{$store.state.age}}
        </p>
      </div>
      <son :ts='toson' @getSon='gets'></son>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs } from 'vue'
import {useStore,mapActions} from 'vuex'
import son from './son.vue'
export default {
  components: { son },

  setup(){
    let state=reactive({
      toson:'',
      fromSon:'',
    })

    function gets(val:string){
        state.fromSon=val
    }
    //通过 hook 拿到store 的内容',
    let store=useStore()

    let actions = { ...mapActions([ 'setAge']) }




    let log=()=>{
      //通过  ---dispatch 触发actions中的方法
      console.log(555)
         store.dispatch('login','小lv')
      }
    let seta=()=>{
      console.log(actions)
      store.dispatch('setAge','20')
      // actions.setAge(20)
    }
    return {
      ...toRefs(state),log,seta,gets
    }
  }
}
</script>

<style scoped>
  .fa{
    width: 800px;
    height: 800px;
    border: 5px green solid;
  }
</style>